<script lang="ts" setup>
import { MemberDetail, MemberLevelInfo, MemberUpdatePoint, MembertUpdateGrowth } from '@fl/api/anjutong'
import { toRefs } from 'vue'
import { useRoute } from 'vue-router'

import { formType } from '../list'
import EditForm from './edit-form.vue'
import GradeDetail from './grade-detail.vue'

const props = withDefaults(defineProps<{
    memberAssets?: IAssets
}>(), {
    memberAssets: () => {
        return {
            accumulatedGrowthValue: 4000,
            accumulatedPoints: 400,
            memberLevelId: '白金',
        }
    },
})
const emits = defineEmits(['refresh'])
type IAssets = {
    accumulatedGrowthValue: number
    accumulatedPoints: number
    memberLevelId: string
    memberLevelName?: string
}

const route = useRoute()
const memberId = route.query?.id

const TitleEunm = {
    editGrowth: '修改成长值',
    editPoint: '修改积分',
    memberDetail: '会员详情',
} as const
const { memberAssets } = toRefs(props)
const centerDialogVisible = ref(false)
const dialogTitle = ref()
const submitLoding = ref(false)
const editIntegralFrom = ref(
    {
        accumulatedPoints: '',
        operationPoints: 0,
        remark: '',
    },
)
const editGrothForm = ref({
    accumulatedGrowthValue: 0,
    operationGrowthValue: 0,
    remark: '',
})
const gradedetail = ref()
async function getMemberLevelInfo() {
    const data = await MemberLevelInfo(memberId)
    gradedetail.value = data
}
// 修改积分
async function updatePoint() {
    submitLoding.value = true
    try {
        const option = {
            memberId,
            operationPoints: editIntegralFrom.value.operationPoints,
            remark: editIntegralFrom.value.remark,
        }
        const data = await MemberUpdatePoint(option)
        if (data)
            ElMessage.success('修改成功')
        submitLoding.value = false
        centerDialogVisible.value = false
        emits('refresh')
    }
    catch (error: any) {
        submitLoding.value = false
    }
}
// 修改成长值
async function updateGrowth() {
    submitLoding.value = true
    try {
        const option = {
            memberId,
            operationGrowthValue: editGrothForm.value.operationGrowthValue,
            remark: editGrothForm.value.remark,
        }
        const data = await MembertUpdateGrowth(option)
        if (data)
            ElMessage.success('修改成功')
        submitLoding.value = false
        centerDialogVisible.value = false
        emits('refresh')
    }
    catch (error: any) {
        submitLoding.value = false
    }
}
// 查看详情
async function getMemberDetail() {
    const data = await MemberDetail(memberId)
    editIntegralFrom.value.accumulatedPoints = data?.memberAssetsVO?.accumulatedPoints ?? 0
    editGrothForm.value.accumulatedGrowthValue = data?.memberAssetsVO?.accumulatedGrowthValue ?? 0
}
async function showDialog(title: string) {
    if (title === TitleEunm.memberDetail)
        await getMemberLevelInfo()
    if (title === TitleEunm.editPoint || title === TitleEunm.editGrowth)
        await getMemberDetail()
    dialogTitle.value = title
    centerDialogVisible.value = true
}
</script>

<template>
    <el-card mb-20
             mt-20
    >
        <div font-700>
            会员资产
        </div>

        <div style="width:40%"

             mt-20
             flex
             justify-between
        >
            <div text-center>
                <div>累计积分</div>

                <div mb-16
                     mt-10
                >
                    {{ memberAssets?.accumulatedPoints }}
                </div>

                <div style="color:#1890ff;"
                     cursor-pointer
                     @click="showDialog(TitleEunm.editPoint)"
                >
                    修改积分
                </div>
            </div>

            <div text-center>
                <div>累计成长值</div>

                <div mb-16
                     mt-10
                >
                    {{ memberAssets?.accumulatedGrowthValue }}
                </div>

                <div style="color:#1890ff"
                     cursor-pointer
                     @click="showDialog(TitleEunm.editGrowth)"
                >
                    修改成长值
                </div>
            </div>

            <div text-center>
                <div>会员等级</div>

                <div mb-16
                     mt-10
                >
                    {{ memberAssets.memberLevelName }}
                </div>

                <div style="color:#1890ff"
                     cursor-pointer
                     @click="showDialog(TitleEunm.memberDetail)"
                >
                    查看
                </div>
            </div>
        </div>
    </el-card>

    <el-dialog v-model="centerDialogVisible"
               width="500"
               :title="dialogTitle"
    >
        <template v-if="dialogTitle === TitleEunm.memberDetail">
            <GradeDetail :gradedetail="gradedetail"
                         @close="centerDialogVisible = false"
            />
        </template>

        <template v-if="dialogTitle === TitleEunm.editPoint">
            <EditForm :type="formType.integral"
                      :editfrom="editIntegralFrom"
                      :loading="submitLoding"
                      @close="centerDialogVisible = false"
                      @submit="updatePoint"
            />
        </template>

        <template v-if="dialogTitle === TitleEunm.editGrowth">
            <EditForm :type="formType.growth"
                      :editfrom="editGrothForm"
                      :loading="submitLoding"
                      @close="centerDialogVisible = false"
                      @submit="updateGrowth"
            />
        </template>
    </el-dialog>
</template>
